{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px{width: 80px;}
	.el-upload-list{width: 30%;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
<el-form :rules="rules" label-width="120px" :label-position="labelPosition">

  <el-form-item label="上传" prop="value">
	  <el-image
	  	v-if="imgUrl" 
	  	class="mw-200px mh-200px"
	    :src="imgUrl"
	    :preview-src-list="[imgUrl]">
	  </el-image>
  	  <el-upload
		  action="/uploadFiles"
		  name="file"
		  ref="upload"
		  :data="{path:'publics/files'}"
		  show-file-list
		  :on-success="handleFilesSuccess"
		  :on-error="handleFilesError"
		  :on-remove="handleFilesRemove"
		  :auto-upload="false">
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button size="small" class="mr-3" type="success" @click="submitUpload">上传到服务器</el-button>
			  <div slot="tip" class="el-upload__tip">文件不超过50M</div>
	  </el-upload>
  </el-form-item>

  <el-form-item label="URL" prop="value">
    <el-input type="textarea" :autosize="{ minRows: 3}" v-model="form.url" class="col-12 col-sm-3 pl-0 pr-0" placeholder="URL"></el-input>
  </el-form-item>

  <el-form-item label="路径" prop="value">
    <el-input type="textarea" :autosize="{ minRows: 3}" v-model="form.path" class="col-12 col-sm-3 pl-0 pr-0" placeholder="PATH"></el-input>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			form:{
				id:0,
	      		url:'',
	      		path:''
			},
        	imgUrl:'',
	        rules: {
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    submitUpload() {
		        this.$refs.upload.submit();
		    },
		    handleFilesRemove(){
		    	var _this=this;
		    	const loading=XYBase.openloading();
		    	if (_this.form.id) {
		    		$.getJSON('/files/uploads',{id:_this.form.id},function(ret){
		    			loading.close();
		    			if(ret){
		    				if(ret.code == 0){
								_this.form.id=0;
								_this.form.url='';
								_this.form.path='';
		    					return true;
		    				}else{
		    					XYBase.msg(ret.msg);
		    					return false;
		    				}
		    			}else{
		    				XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		    		return false;
		    	}else{
		    		loading.close();
		    		return true;
		    	}
		    },
			handleFilesSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						const isIMG = XYBase.config.imageMime.indexOf(file.type)>=0;
						if(res.data.type == 'publics/files'){
							this.form.id=res.data.id;
							this.form.url=res.data.url;
							this.form.path=res.data.path;
							if (isIMG) {
								this.imgUrl=res.data.url;
							}
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleFilesError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			}
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}